<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      /* 单行文本 */
      /*
        p {
            width: 200px;
            height: 50px;
            border: 1px solid #ddd;
            line-height: 50px;
            white-space: nowrap;        //文字不换行
            text-overflow: ellipsis;    //超出显示省略号
            overflow: hidden;           //超出部分隐藏
        }
        */

      p {
        width: 200px;
        height: 100px;
        border: 1px solid #ddd;
        line-height: 50px;
        overflow: hidden;               /* 超出部分隐藏 */
        text-overflow: ellipsis;        /* 超出部分显示省略号 */
        display: -webkit-box;           /* 对象做为弹性盒子模型显示 */
        -webkit-line-clamp: 2;          /* 块容器 中的内容限制为指定的行数。 */
        -webkit-box-orient: vertical;   /* 弹性盒子对象的子元素排列方式为竖排 */
      }
    </style>
  </head>
  <body>
    <!-- 单行文本 -->
    <!-- <p>当文字的内容超容器的宽度时，会显示3个省略号</p> -->

    <!-- 多行文本 -->
    <p>当文字的内容超容器的宽度时，会显示3个省略号当文字的内容超容器的宽度时，</p>

    <!-- 注意事项：
         只有当元素的高 = line-height 大小 * -webkit-line-clamp（指定行数） 时，才能显示出正确的效果。 -->
  </body>
</html>
